<template>
	<view class="inviteCode">
		<view class="canvas">
			<!-- <view class="share-banner-box"> -->

			
					<view> 
					      <canvas :style="{ width: cansWidth + 'px', height: cansHeight + 'px' }"
							class="yui-share-blcok" canvas-id="firstCanvas"></canvas>
					</view>
					<view v-show="needLongTapSaveImgs">
						<image :src="tempFilePaths" :style="{ width: cansWidth + 'px', height: cansHeight + 'px' }"
							class="yui-share-blcok"></image>
					</view>
		</view>


		<view class="share_footer">
			<view class="share_box">
				<view class="share_box_span" @click="share">
					<image src="/static/images/share/weixin.png" class="share_icon" mode="widthFix"></image>
					<text class="share_box_text">分享微信好友</text>
				</view>
				<view class="share_box_span" @click="share">
					<image src="/static/images/share/pyq.png" class="share_icon" mode="widthFix"></image>
					<text class="share_box_text">朋友圈</text>
				</view>
				<view class="share_box_span" @click="saveCans(1)">
					<image src="/static/images/share/save.png" class="share_icon" mode="widthFix"></image>
					<text class="share_box_text">保存手机</text>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	var that
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				codeImg: '',
				username: '',
				codeData: '',
				width: '',
				height: '',
				bottom: '',
				shareId: uni.getStorageSync('account'),
				cansWidth: 310, //海报宽度
				cansHeight: 570, //海报高度
				widths: "", //图片列表动态宽度
				imgsrc: "", //保存图片的路径
				userdata: {}, //个人数据
				swiperList: [], //海报数组
				shareText: '',
				image: '',
				imgsArr: '',
				tempFilePaths:'',
				needLongTapSaveImgs:false,
				indexs: 0,
			}
		},
		onShow() {
			that = this
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				that.initData();
				
			}
		},
		onShareAppMessage() {
			return {
				title: this.shareText ? this.shareText : "山海堂MST",
				path: '/pages/tabBar/component/components',
				imageUrl: this.image
			}
		},

		onLoad(e) {

		},

		methods: {
			initData() {
				let imgs = that.tui.getImgs();


				let token = that.tui.getToken();
				let datas = {
					token: token,
				};
				let result = that.tui.request('shop', 'post', datas, 1000, 1, '', 'merchantsPayQrCode');
				Promise.resolve(result).then((value) => {
					if (value.code == 200) {

						that.codeImg = value.data.qr_code;
						that.codeData = value.data;
						that.tui.setImgs(value.data.qr_bg);
						that.selseimg(this.imgsArr)
	
	
					} else {
						that.tui.toast(value.message);
					}
				})
				// }
			},
			change(e) {
				this.indexs = e.detail.current;

			},
			shareImg() {
				//数据请求结束
				uni.showLoading({
					title: '加载中'
				});
				uni.hideLoading();
				//数据请求结束
				that.selseimg(that.codeData.qr_bg)
			},
			selseimg(e) { //绘制海报
				let names = 'firstCanvas';
				uni.showLoading({
					title: '生成海报中'
				});



				const context = uni.createCanvasContext(names)

				uni.downloadFile({
					url: e,
					success: function(res) {
						context.drawImage(res.tempFilePath, 0, 20, 310, 570) //海报背景
						setTimeout(function() { //定时器，海报方法不能立即执行，等页面渲染完成
							context.drawImage(that.codeImg, 20, 420, 90, 90) //个人信息背景
							context.setFillStyle('#a2a2a2')
							context.setFontSize(12)
							// context.fillText(that.codeData.nick_name, 18, 500) //昵称
							context.fill()
						
							context.setFillStyle('#565555')
							context.setFontSize(11)
						
							context.fill()
						
							// context.save()
							// context.beginPath()
							context.arc(44, 458, 24, 0, 2 * Math.PI)
							context.clip()
							// context.drawImage(that.codeData.user_headimg, 17, 430, 52, 52) //头像
							context.restore()
							let tempRatio = 1.5;
							
							// #ifdef H5 || APP-PLUS
							
							tempRatio = 1;
							// #endif
							context.draw(true, () => {
								setTimeout(() => {
									uni.canvasToTempFilePath({
										x: 0,
										y: 0,
										width: that.cansWidth * tempRatio,
										height: that.cansHeight * tempRatio,
										destWidth: that.cansWidth * tempRatio * 2,
										destHeight: that.cansHeight * tempRatio * 2,
										canvasId: names,
								
										success: (ress) => {
											
											that.tempFilePaths=ress.tempFilePath
											//#ifdef H5
											that.needLongTapSaveImg= true;
											that.needLongTapSaveImgs=true;
											//#endif
										}
									})
								})
							})
							uni.hideLoading();
						}, 1000);
						
					}
				})
				
			},

			saveCans(e) { //保存海报
				let names = 'firstCanvas';
				
				//#ifdef H5
				this.tui.toast("请长按保存图片");
				return;
				//#endif
				//#ifdef APP-PLUS
				uni.showLoading({
					title: '保存海报中'
				});
				let tempRatio = 1.5;

				// #ifdef H5 || APP-PLUS

				tempRatio = 1;
				// #endif

				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: that.cansWidth * tempRatio,
					height: that.cansHeight * tempRatio,
					destWidth: that.cansWidth * tempRatio * 2,
					destHeight: that.cansHeight * tempRatio * 2,
					canvasId: names,
					success: function(res) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(red) {
								uni.showToast({
									title: '保存相册成功'
								})
								that.imgsrc = res.tempFilePath
								if (e == 2) {

								}
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {

													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
				//#endif
			},
			share() {
				let names = '';
				switch (this.indexs) {
					case 0:
						names = 'firstCanvas';
						break;
					case 1:
						names = 'twoCanvas';
						break;
					case 2:
						names = 'threeCanvas';
						break;
					case 3:
						names = 'fourCanvas';
						break;
					case 4:
						names = 'fiveCanvas';
						break;
					default:
						break;
				}

				//#ifdef H5
				this.tui.toast("请用微信右上角分享");
				return;
				//#endif
				let tempRatio = 1.5;

				// #ifdef H5 || APP-PLUS
				tempRatio = 1;
				// #endif

				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: that.cansWidth * tempRatio,
					height: that.cansHeight * tempRatio,
					destWidth: that.cansWidth * tempRatio * 2,
					destHeight: that.cansHeight * tempRatio * 2,
					canvasId: names,
					success: function(res) {
						// uni.hideLoading()
						uni.shareWithSystem({
							provider: "weixin",
							// scene: "WXSceneSession",
							type: 2,
							imageUrl: res.tempFilePath,
							success: function(res) {
								uni.showToast({
									title: JSON.stringify(err),
									duration: 2000,
									icon: 'none'
								});
							},
							fail: function(err) {

								console.log("fail:" + JSON.stringify(err));
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)

			},
			shareLine() {
				let tempRatio = 1.5;
				// #ifdef H5 || APP-PLUS
				tempRatio = 1;
				// #endif
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: that.cansWidth * tempRatio,
					height: that.cansHeight * tempRatio,
					destWidth: that.cansWidth * tempRatio * 2,
					destHeight: that.cansHeight * tempRatio * 2,
					canvasId: 'firstCanvas',
					success: function(res) {
						//#ifdef H5
						that.tui.toast("请用微信右上角分享");
						return;
						return;
						//#endif
						// uni.hideLoading()
						uni.share({
							provider: "weixin",
							scene: "WXSenceTimeline",
							type: 2,
							imageUrl: res.tempFilePath,
							success: function(res) {
								uni.showToast({
									title: JSON.stringify(err),
									duration: 2000,
									icon: 'none'
								});
							},
							fail: function(err) {

								console.log("fail:" + JSON.stringify(err));
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},

			
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.inviteCode-face {
		font-size: 24rpx;
		margin: 40rpx;
	}

	.inviteCode-face-imgs {
		text-align: left;
		margin-top: -80rpx;
	}

	.inviteCode-desc-title {
		font-weight: blod;
		display: block;
		font-size: 26rpx;
		margin-bottom: 10rpx;
	}

	.tui-banner-swiper {
		width: 100%;
		height: 610px;
		// margin:0 auto;
		text-align: center;
		border-radius: 12rpx;
		overflow: hidden;
		transform: translateY(0);
	}

	.inviteCode-desc-title-small {
		font-size: 22rpx;
		color: #a8a7a6;
	}

	.yui-share-box {
		position: relative;
		margin: 0 auto;
	}

	.yui-share-blcok {
		margin: 0 auto;
	}

	.yui-share-block {
		position: absolute;
		left: 10%;
		bottom: 12%;
		z-index: 10000;
	}

	.inviteCodeBox {
		background: #fff;
		display: flex;
		justify-content: space-between;
		height: 220rpx;
		width: 100%;
		position: absolute;
		bottom: 0rpx;
		z-index: 1000;
		border-radius: 20rpx;
	}

	.inviteCode-nick {
		display: block;
		text-align: left;

		color: #a2a2a2;
	}

	.tui-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.inviteCode-desc {
		margin-top: 10rpx;
		text-align: left;
		display: block;
	}

	.inviteCode-img {
		margin: 10rpx;
	}

	.yui-share {
		position: absolute;

		bottom: 40rpx;
		width: 100%;
	}

	.inviteCodeImgs {
		width: 170rpx;
		margin: 26rpx;

	}

	.share-member {
		display: flex;
		background: #fff;
		justify-content: space-between;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 24rpx;
		padding: 0rpx 20rpx 0rpx 20rpx;
	}

	.share_box {
		text-align: center;
		margin: 20rpx 0;
		justify-content: space-between;
		font-size: 22rpx;
		line-height: 34rpx;
		color: #353535;
		display: flex;
	}

	.share_box_span {
		display: block;
		width: 33%;
	}

	.share_box_text {
		display: block;
		text-align: center;
	}

	.share_icon {
		width: 60rpx;
	}

	.share_footer {
		width: 100%;
		position: fixed;
		bottom: 0rpx;
		height: 140rpx;
		z-index: 100000;
		background: #fff;

	}

	.inviteCodeImg-box-face-img {
		width: 100rpx;
		height: 100rpx;
		// background:#b8b8b8;
		border-radius: 50%;
		display: block;
	}

	.invteCode-nick-name {
		display: flex;
		justify-content: left;
		text-align: left;
		margin-bottom: 10rpx;
	}

	.inviteCodeImg-box-face-title {
		font-size: 24rpx;

		margin-left: 20rpx;
	}

	.inviteCodeImg-box-code-img {
		border-radius: 20rpx;
		width: 100%;
	}

	.inviteCodeImg-box-code {
		text-align: center;
		position: relative;
	}

	.canvas {
		// display: flex;
		// justify-content: center;
		// margin:60rpx auto;
		text-align: center;
	}

	.share-banner-box {}

	.inviteCode {
		min-height: 100%;
		position: relative;
		// background: linear-gradient(to bottom, #F9D981 , #F4BE5A);
		background-repeat: no-repeat;
		background-size: 100%;

	}



	.inviteCodeImg {
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
		width: 84%;
		margin: 30rpx auto 0 auto;
		text-align: center;
	}

	.inviteCode-name {
		word-break: break-all;
		overflow: hidden;
		align-items: center;
		max-width: 50%;
		height: 32rpx;
		text-overflow: ellipsis;
		// font-size: 28rpx;
		color: #666666;
	}

	.inviteCode-codes {
		font-size: 36rpx;
		color: #2f2f2f;
		font-weight: bold;
	}

	.inviteCodeImg-box {
		padding-top: 360rpx;
		padding-left: 260rpx;
		display: flex;

		align-items: center;
		justify-content: left;
	}
</style>
